<template>
    <div>
        <dl>
            <dt>
                <table align="center" width="500px">
                    <tr>
                        <td>用户名:</td>
                        <td>{{user.username}}</td>
                        <td>用户等级:</td>
                        <td>{{user.level | level}}</td>
                        <td>用户赚取到的金额:</td>
                        <td>{{user.money}}</td>
                    </tr>
                </table>
            </dt>
        </dl>
        <dl>用户读过的小说:</dl>
        <dd>
            <table align="center" width="400px" border="1">
                <tr>
                    <td>标题</td>
                    <td>权限</td>
                    <td>访问次数</td>
                </tr>
                <tr v-for="story in story_num">
                    <td>{{story.story.title}}</td>
                    <td>{{story.story.level | level}}</td>
                    <td>{{story.num}}</td>
                </tr>
            </table>
        </dd>
        <button @click="putUser" v-show="user.level==0">升级VIP</button>
    </div>
</template>

<script>
    export default {
        name: "record_story",
        data() {
            return {
                user: JSON.parse(sessionStorage.getItem('user')),
                story_num: [],
            }
        },
        created() {
            this.$axios({
                url: 'story/number/',
                params: {
                    user_id: this.user.id
                }
            }).then(resp => {
                console.log(resp.data)
                this.story_num = resp.data;
            })
        },
        methods: {
            putUser() {
                this.$axios({
                    url: 'story/user/',
                    method: 'put',
                    data: {
                        user_id: this.user.id,
                    }
                }).then(resp => {
                    alert(resp.data.msg);
                    if (resp.data.code == 200) {
                        sessionStorage.setItem('user', JSON.stringify(resp.data.user));
                        // this.$router.go(0)
                    }
                })
            }
        },
        computed: {},
        filters: {
            level(x) {
                if (x == 0) {
                    return '普通'
                } else {
                    return 'VIP'
                }
            }
        },
        watch: {},
    }
</script>

<style scoped>

</style>
